<!--  @author:ymy  -->
<template>
  <div class="interview">
    <div class="blive-live">
      <div class="normal-live" v-for="item in interviewData" :key="item.id">
        <div class="normal-img">
          <img :src="'https://ss.lanqb.com/' + item.imgCover" alt="" />
        </div>
        <div class="normal-content">
          <h4>{{ item.title }}</h4>
          <div class="normal-user">
            <img
              src="https://ss.lanqb.com/7f4d8a97-9d13-4ddc-8c7e-36fe478c0ddd.jpg?imageView2/1/w/60/h/60"
              alt=""
            />
            <span>嘉妮Janny</span>
          </div>
          <p>
            <span><van-icon name="eye-o" />{{ item.statistics.hits_num }}</span>
            <span><van-icon name="chat-o" />{{ item.statistics.like_num }}</span>
            <span><van-icon name="good-job-o" />{{ item.statistics.comment_num }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Interview',
  data() {
    return {};
  },
  props: ['interviewData'],
};
</script>
<style lang="less" scoped>
.interview {
  > .blive-live {
    padding: 0 0.15rem;
    margin-bottom: 0.5rem;
    > .normal-live {
      width: 3.45rem;
      height: 1.05rem;
      background-color: white;
      border-radius: 0.1rem;
      margin-top: 0.1rem;
      display: flex;
      // justify-content: space-between;
      > .normal-img {
        width: 1.4rem;
        height: 1.05rem;
        position: relative;
        img {
          width: 1.4rem;
          height: 1.05rem;
        }
        > .little-span {
          position: absolute;
          top: 0.06rem;
          left: 0.06rem;
          background-color: rgba(0, 0, 0, 0.4);
          font-size: 0.12rem;
          color: white;
          padding: 0.03rem;
          border-radius: 0.05rem;
          line-height: 1.5;
        }
      }
      > .normal-content {
        margin-left: 0.1rem;
        padding-top: 0.1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h4 {
          font-size: 0.13rem;
          display: inline-block;
          height: 0.37rem;
        }
        > .normal-user {
          img {
            width: 0.17rem;
            height: 0.17rem;
            border-radius: 50%;
          }
          span {
            vertical-align: top;
            font-size: 0.12rem;
            margin-left: 0.1rem;
          }
        }
        > p {
          font-size: 0.12rem;
          color: #9f9f9f;
          // margin-bottom: 0.1rem;
          span {
            margin-right: 0.2rem;
          }
        }
      }
    }
  }
}
</style>
